<template>
  <div class="overflow-hidden w-full whitespace-nowrap max-md:max-w-full bg-white bg-opacity-40 header">
    <div class="flex relative z-10 flex-col mx-auto w-[1440px]">
      <nav
        class="flex relative flex-col justify-center items-start px-[12px] py-[15px] mr-0 w-full text-2xl font-medium  text-zinc-800 max-md:px-5 max-md:max-w-full"
      >
        <div class="flex gap-4 items-center">
          <el-image
            src="/logo.svg"
            alt="Company logo"
            style="height: 50px; width: 162px"
          />
          <div class="bg-[#333] w-[1px] h-[34px]" />
          <div class="flex flex-auto gap-5 my-auto">
            <h1 class="flex-auto my-auto">
              {{ $t('homeText.header') }}
            </h1>
          </div>
        </div>
      </nav>
    </div>
  </div>
</template>

<script setup>
// const logoUrl = computed(() => {
//   return new URL('@/assets/images/logo-w.png', import.meta.url).href
// })
</script>

<style scoped lang="scss">
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  backdrop-filter: blur(10px)

}
</style>
